<template>
  <div class="container" style="padding: 10px">
    <el-card class="box-card">
      <div>
        <span style="font-size: 14px; color: #606266;font-weight: 700;">关键字</span>
        <el-input
          placeholder="请输入内容"
          v-model="input"
          clearable
          style="width: 200px; margin-bottom: 15px; margin-left: 10px"
          prefix-icon="el-icon-search"
          @keyup.native.enter="search"
        >
        </el-input>
        <el-button
          @click="search"
          type="primary"
          round
          style="float: right"
          icon="el-icon-magic-stick
"
          >搜索</el-button
        >
        <el-button
          @click="clearInput"
          style="float: right; margin-right: 5px"
          round
          >清除</el-button
        >
      </div>

      <el-alert
      :closable="false"
        style="margin-bottom: 15px"
        :title="`一共${total}条信息`"
        type="info"
        show-icon
      >
      </el-alert>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%; font-size: 16px"
        v-loading.fullscreen.lock="fullscreenLoading"
        :header-cell-style="{
          background: '#FAFAFA',
          color: '#909399',
          borderBottom: '2px solid #e8e8e8',
        }"
      >
        <el-table-column prop="id" label="编号" align="center">
        </el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
          width="70px"
          align="center"
        >
          <template v-slot="{ row }">
            {{
              +row.questionType === 1
                ? "单选"
                : +row.questionType === 2
                ? "双选"
                : "多选"
            }}
          </template>
        </el-table-column>
        <el-table-column prop="questionIDs" label="题目编号" align="center">
          <template v-slot="{ row }">
            <el-row>
              <el-col v-for="(item, index) in row.questionIDs" :key="index">
                <el-button
                  style="margin-left: 0px"
                  @click="btnView(row, index)"
                  type="text"
                  >{{ item.number }}</el-button
                >
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间" align="center">
        </el-table-column>
        <el-table-column
          prop="totalSeconds"
          label="答题时间(s)"
          width="120px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="accuracyRate"
          label="正确率(%)"
          width="100px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="userName"
          label="录入人"
          width="100px"
          align="center"
        >
        </el-table-column>
        <el-table-column label="操作" width="80px" align="center">
          <template slot-scope="row">
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="btndel(row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end" style="margin-top: 20px">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="num.page"
          :page-sizes="[5, 6, 7, 8, 20]"
          :page-size="num.pagesize"
          layout=" prev, pager, next, sizes, jumper"
          :total="total"
        >
        </el-pagination>
      </el-row>
    </el-card>
    <TitlePreview
      :isShowMyDialog.sync="isShowMyDialog"
      :viewData="viewData"
    ></TitlePreview>
  </div>
</template>

<script>
import TitlePreview from '../components/Title-preview.vue'
import { randoms, detail, removeRandoms } from '@/api/hmmm/questions.js'
export default {
  components: {
    TitlePreview
  },
  data () {
    return {
      fullscreenLoading: false,
      loading: true,
      searchinput: '',
      input: '',
      tableData: [
        {
          accuracyRate: '',
          addTime: '',
          id: '',
          totalSeconds: '',
          questionType: '',
          questionIDs: [],
          userName: ''
        }
      ],
      viewData: {}, // 题目预览详情
      isShowMyDialog: false,
      num: {
        page: 1,
        pagesize: 5
      },
      total: null
    }
  },
  created () {
    this.randoms()
  },
  methods: {
    async randoms () {
      const currentPage = Math.ceil((this.total - 1) / this.num.pagesize)
      this.num.page = this.num.page > currentPage ? currentPage : this.num.page
      this.num.page = this.num.page < 1 ? 1 : this.num.page
      const { data } = await randoms({ ...this.num })
      //   console.log(data)
      this.tableData = data.items
      this.num.page = +data.page
      this.num.pagesize = +data.pagesize
      this.total = data.counts
      //   console.log(this.num.page)
      //   console.log(this.tableData)
      this.loading = false
    },
    async btnView (row, i) {
      console.log(row.questionIDs[i].id)
      const { data } = await detail({ id: row.questionIDs[i].id })
      this.viewData = data
      this.isShowMyDialog = true
      // console.log(this.viewData)
    },
    async btndel (row) {
      console.log(row.row.id)
      try {
        await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
          type: 'warning'
        })
        await removeRandoms({ id: row.row.id })
        await this.$message.success('删除成功')
        this.randoms()
        await this.$emit('getChoice')
      } catch (err) {
        console.log(err)
      }
    },
    async handleSizeChange (val) {
      this.num.pagesize = val
      this.num.page = 1
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const { data } = await randoms({
        ...this.num,
        keyword: this.searchinput
      })
      //   console.log(data)
      this.tableData = data.items
      this.num.page = +data.page
      this.num.pagesize = +data.pagesize
      this.total = data.counts
      loading.close()
    },
    async handleCurrentChange (val) {
      this.num.page = val
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const { data } = await randoms({
        ...this.num,
        keyword: this.searchinput
      })
      //   console.log(data)
      this.tableData = data.items
      this.num.page = +data.page
      this.num.pagesize = +data.pagesize
      this.total = data.counts
      //   console.log(`当前页: ${val}`)
      loading.close()
    },
    clearInput () {
      this.input = ''
    },
    async search () {
      this.searchinput = this.input
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.num.page = 1
      const { data } = await randoms({ ...this.num, keyword: this.input })
      //   console.log(data)
      this.tableData = data.items
      this.num.page = +data.page
      this.num.pagesize = +data.pagesize
      this.total = data.counts
      loading.close()
    }
    // number (row, column, cellValue, index) {
    // //   console.log(row)
    // //   console.log(column)
    // //   console.log(index)
    // //   return cellValue.forEach(item => {
    // //     console.log(item.number)
    // //     return item.number+=
    // //   })
    //   return 1
    // }
  }
}
</script>

<style scoped lang="less"></style>
